<template>
  <div id="universities">
    <el-amap class="amap-box" :vid="'amap-vue'" :center="center"  zoom="12">
      <el-amap-marker
              v-for="college in colleges"
              :key="college.name"
              :position="college.location"
              :icon="college.is985 ? 'http://115.159.66.213:8000/985.png':'http://115.159.66.213:8000/211.png'"
              :events="events"
              :extData="college.index"
      ></el-amap-marker>
    </el-amap>
    <Info v-show="isShow" :info="info"></Info>
    <Reminder></Reminder>
  </div>
</template>

<script>
  import {colleges} from "../../assets/js/college";
  import Info from "./Info";
  import Reminder from "./Reminder";

  export default {
    name: "Universities",
    data() {
      let self = this
      return {
        center: colleges[0].location,
        events: {
          click(e) {
            self.info=self.colleges[e.target.w.extData]
            self.isShow = true
          }
        },
        isShow: false,
        colleges: colleges,
        info: colleges[0]
      }
    },
    mounted() {
      if(this.$route.query.index){
        this.center=colleges[this.$route.query.index].location
        this.colleges=[colleges[this.$route.query.index]]
        this.info=colleges[this.$route.query.index]
      }
    },
    components: {
      Info,
      Reminder
    }
  }
</script>

<style scoped>
  #universities{
    height: 100%;
  }
</style>